import React from 'react';
import { Box, Flex, useColorModeValue } from '@chakra-ui/react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/home';
import Vocabulary from './pages/vocabulary';
import Practice from './pages/practice';
import Progress from './pages/progress';
import Header from './components/common/header';
import Footer from './components/common/footer';

function App() {
  const bgColor = useColorModeValue('gray.50', 'gray.800');

  return (
    <Router>
      <Flex direction="column" minH="100vh" bg={bgColor}>
        <Header />

        <Box flex="1" px={4} py={6}>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/vocabulary" element={<Vocabulary />} />
            <Route path="/practice" element={<Practice />} />
            <Route path="/progress" element={<Progress />} />
          </Routes>
        </Box>

        <Footer />
      </Flex>
    </Router>
  );
}

export default App;
